<template>
    <u-popup :show="show" :round="16" bgcolor="#F5F6FA">
        <!-- <view class="bg" @tap="cancelMultiple"></view> -->
        <view class="selectMultiple">
            <view class="multipleBody">
                <view class="title">
                    <view class="close"></view>
                    <view class="name">{{title}}RER测量关联</view>
                    <view class="confirm" @tap="cancelMultiple">
                        <u-icon name="close" size="16"></u-icon>
                    </view>
                </view>
                <view class="list">
                    <view class="mask mask-top"></view>
                    <view class="mask mask-bottom"></view>
                    <scroll-view class="diet-list" scroll-y="true">
                        <view
                            v-for="(item, index) in list"
                            :key="index"
                            :class="['item', item.selected ? 'checked' : '']"
                            @tap="onChange(index, item)"
                        >
                            <view class="box">
                                <view
                                    :class="{'check-icon':!item.selected,'checked-icon':item.selected}"
                                ></view>
                                <view class="box-c">
                                    <view class="con-l">
                                        <view class="text">{{title}}</view>
                                        <view class="con-time">{{ item.createTime }}</view>
                                    </view>
                                    <view
                                        class="type-icon"
                                        :style="{background:colorObj[item.rerLevel]}"
                                    >{{ item.rerLevel }}</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="confirm-btn" @tap="confirmMultiple">确定</view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: "multiple-picker",
    data () {
        return {
            // 选中值
            value: [],
            // 选中列表
            selected: [],
            // 列表数据
            list: [],
            colorObj: {
                '1': '#54DE97',
                '2': '#54A2DE',
                '3': '#AE81F3',
                '4': '#DEB354',
                '5': '#EC8F59',
            }
        };
    },
    props: {
        // 是否显示
        show: {
            type: Boolean,
            default: false
        },
        // 标题
        title: {
            type: String,
            default: ''
        },
        //数据列表
        columns: {
            type: Array,
            default: [
                {
                    label: '测试1',
                    value: '1',
                }
            ]
        },
        // 默认选中
        defaultIndex: {
            type: Array,
            default: [],
        }
    },
    watch: {
        // 监听是否显示
        show (val) {
            if (val) {
                this.openMultiple();
            }
        }
    },
    methods: {
        // 列点击事件
        onChange (index, item) {
            // 是否已选中
            if (this.value.indexOf(item.value.toString()) >= 0) {
                this.list[index].selected = false;
            }
            else {
                this.list[index].selected = true;
            }

            // 筛选已勾选数据
            this.value = [];
            this.selected = [];
            this.list.forEach((col_item, col_index) => {
                if (col_item.selected) {
                    this.value.push(col_item.value.toString());
                    this.selected.push({
                        ...col_item,
                        // label: col_item.label,
                        // value: col_item.value,
                    });
                }
            });
            this.$emit("change", { selected: this.selected, value: this.value });
        },
        // 弹出框开启触发事件
        openMultiple () {
            // 初始化列表数据,默认勾选数据
            this.value = this.defaultIndex;
            let arr= []
            this.columns.forEach((item, index) => {
                this.$set(item, "selected", false);
                if (this.value.indexOf(item.value.toString()) >= 0) {
                    item.selected = true;
                    arr.push(item)
                }
            });
            this.list = Object.assign([], this.columns);
            this.selected = arr
            // 弹出动画
        },
        // 确认
        confirmMultiple () {
            this.$emit("confirm", { selected: this.selected, value: this.value });
        },
        // 关闭/取消
        cancelMultiple () {
            this.$emit("cancel");
        },
        // 展开动画

    }
}
</script>

<style scoped lang="scss">
.popup {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 99999;
    left: 0;
    bottom: 0;

    .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(black, 0.5);
    }
}

.selectMultiple {
    width: 100%;
    min-height: 500rpx;
    // position: absolute;
    // left: 0;
    // bottom: 0;
    background-color: #f5f6fa;
    border-radius: 32rpx 32rpx 0 0;
    .multipleBody {
        width: 100%;
        min-height: 500rpx;
        padding: 48rpx 32rpx 32rpx 32rpx;
        box-sizing: border-box;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 28rpx;
            display: flex;
            flex-direction: row;

            .close {
                width: 80rpx;
                opacity: 0.5;
            }
            .name {
                width: 530rpx;
                text-align: center;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: #000000;
            }
            .confirm {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .list {
            width: 100%;
            padding-top: 30rpx;
            position: relative;

            .mask {
                width: 100%;
                height: 120rpx;
                position: absolute;
                left: 0;
                z-index: 2;
                pointer-events: none;

                &.mask-top {
                    top: 30rpx;
                    background-image: linear-gradient(
                        to bottom,
                        #f5f6fa,
                        rgba(#f5f6fa, 0)
                    );
                }
                &.mask-bottom {
                    bottom: 0;
                    background-image: linear-gradient(
                        to bottom,
                        rgba(#f5f6fa, 0),
                        #f5f6fa
                    );
                }
            }

            .diet-list {
                height: 310rpx;
                max-height: 400rpx;
            }

            .item {
                position: relative;
                width: 100%;
                line-height: 40rpx;
                // border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
                padding: 20rpx 0;
                font-size: 30rpx;
                box-sizing: border-box;
                text-align: center;
                .box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .check-icon {
                        width: 32rpx;
                        height: 32rpx;
                        border: 2px solid #999999;
                        border-radius: 50%;
                    }
                    .checked-icon {
                        width: 32rpx;
                        height: 32rpx;
                        background: #1F2434;
                        border-radius: 50%;
                        position: relative;
                        &::after {
                            content: '';
                            width: 12rpx;
                            height: 12rpx;
                            background: #fff;
                            border-radius: 50%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                    .box-c {
                        width: 630rpx;
                        height: 136rpx;
                        background: #fff;
                        border-radius: 32rpx;
                        padding: 24rpx 32rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .con-l {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: flex-start;
                            .text {
                                font-family: PingFang SC, PingFang SC;
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #333333;
                            }
                            .con-time {
                                font-family: PingFang SC, PingFang SC;
                                font-weight: 400;
                                font-size: 28rpx;
                                margin-top: 8rpx;
                                color: #999999;
                            }
                        }
                        .type-icon {
                            width: 40rpx;
                            height: 40rpx;
                            color: #fff;
                            background: #54de97;
                            border-radius: 8rpx 8rpx 8rpx 8rpx;
                        }
                    }
                }
                span {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    padding: 0 40rpx;
                }

                .icon {
                    position: absolute;
                    right: 10rpx;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 16px;
                }
                &.checked {
                    color: #2d8dff;
                }
                &:last-child {
                    border-bottom: none;
                    margin-bottom: 60rpx;
                }
                &:first-child {
                    margin-top: 60rpx;
                }
            }
        }
        .confirm-btn {
            margin-top: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 88rpx;
            background: #1F2434;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #ffffff;
        }
    }
}
</style>
